body {
	background-color: #899FC6;
	margin: 0;
	padding-top: 10px;
	font: 15px sans-serif;
	height: 100%;
	height: 100vh;
	overflow: hidden;
}
main {
	box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4);
	width: 1000px;
	min-width: 800px;
	max-width: calc(100% - 10px);
	height: calc(100% - 20px);
	resize: horizontal;
	margin: 0 auto;
	
	background: #fdfdfd;
	padding: 3px;
	
	overflow: auto;
	box-sizing: border-box;
	
	display: grid;
	grid-gap: 3px;
	grid-template:
		"conf asrc adst" 1.5em
		"conf src dst" auto
		/ 1.2fr 2fr 2fr;
}
main > section {
	overflow: auto;
	display: flex;
	flex-direction: column;
}
main #conf {
	grid-area: conf;
	overflow: auto;
	min-width: 150px;
	display: grid;
	grid-template: 
		"header header" min-content
		"hidden-form hidden-form" min-content
		"conf-lang conf-lang" min-content
		"conf-imp-exp conf-imp-exp" min-content
		"conf-import conf-export" min-content
		
		"in-autoguess in-autoguess" min-content
		"conf-mode conf-mode" min-content
		"in-glyphs in-glyphs" min-content
		"ccol ccol" min-content
		"in-kerning in-kerning" min-content
		"cw ch" min-content
		"ox oy" min-content
		"sx sy" min-content
		"bx by" min-content
		"spacing is-mono" min-content
		
		"em-square metric-line-gap" min-content
		"ascend descend" min-content
		"metric-calc metric-calc" min-content
		"font-px-size metric-auto" min-content
		
		"font-name font-name" min-content
		"font-author font-author" min-content
		"font-copy font-copy" min-content
		"font-version font-version" min-content
		"font-desc font-desc" min-content
		"font-license font-license" min-content
		"font-license-url font-license-url" min-content
		"font-sample-text font-sample-text" min-content
		
		"etc etc" auto
		/ calc(50% - 1px) calc(50% - 1px);
}
.hidden-form {
	visibility: hidden;
	overflow: hidden;
	height: 0;
}
#conf-hidden-form {
	grid-area: hidden-form;
}
main #conf section:not(.flex-row), .flex-col {
	display: flex;
	flex-direction: column;
}
.flex-row {
	display: flex;
	flex-direction: row;
}
main #conf section {
	margin: 1px;
}
input[name="conf-mode"] {
	display: none;
}

#conf #conf-mode {
	margin-top: 0.3em;
}
#conf-mode > label, #conf-mode > span {
	border-bottom: 1px solid #aaa;
}
#conf-mode > span {
	width: 4px;
}
#conf-mode > label {
	width: 50%;
	text-align: center;
	border-radius: 5px 5px 0 0;
	color: #777;
}
#conf-mode > label:hover {
	background: #E5E5E5;
}
#conf #edit-input:checked ~ #conf-mode > label[for="edit-input"],
#conf #edit-output:checked ~ #conf-mode > label[for="edit-output"],
#conf #edit-meta:checked ~ #conf-mode > label[for="edit-meta"] {
	background: transparent;
	border: 1px solid #aaa;
	border-bottom: none;
	color: #000;
}
#edit-input:not(:checked) ~ section.imp,
#edit-output:not(:checked) ~ section.exp,
#edit-meta:not(:checked) ~ section.meta {
	display: none;
}

#conf label {
	padding-top: 0.1em;
	padding-bottom: 0.1em;
}
#conf header, .hello-window header {
	text-align: center;
	font-size: 125%;
	border-bottom: 1px solid #bbbbbb;
	margin: 0 0.5em;
	line-height: 1.3;
}

#conf-lang option[value="help"] {
	border-top: 1px solid #ccc;
	margin-top: 0.5em;
}

#font-metric-calc-val.good { color: #2A2; }
#font-metric-calc-val.lessgood { color: #A73; }
#font-metric-calc-val.notgood { color: #F33; }

section.glyphs-list {
	min-width: 100px;
	min-height: 4em;
	height: 6em;
	overflow: auto;
	resize: both;
}
main textarea {
	font: 12px monospace;
	resize: vertical;
	min-height: 3em;
}
main .split-h {
	display: flex;
	margin-top: 0.3em;
}
main .split-h > * {
	flex-grow: 1;
}
main .split-h > *:not(:first-child) {
	margin-left: 0.1em;
}
main .split-h > *:not(:last-child) {
	margin-right: 0.1em;
}
input[type="file"] {
	width: 100%;
}
.justify-middle {
	justify-content: center;
}
#dst-top input, #dst-top a {
	margin-left: 0.3em;
	white-space: normal;
	/*width: 4em;*/
}
#dst-top input, #dst-top label {
	white-space: nowrap;
}
#donate {
	background-color: #fa5c5c;
    color: white;
    text-shadow: 0 1px 0px #e54747;
	border: 1px solid rgba(0, 0, 0, 0.7);
	box-shadow: inset 0 0 1px rgba(255,255,255,0.21);
	padding: 0 5px;
	border-radius: 3px;
	text-decoration: none;
}
#donate:hover {
	background-color: #e15e5e;
}

#dst-span {
	font: 16px pixelfont;
	padding: 1px;
	outline: none;
	-webkit-font-smoothing: none;
	white-space: pre;
}

.panner {
	flex-grow: 1;
	overflow: hidden;
	outline: 0 solid transparent;
	width: 100%;
	position: relative;
	/* blue/dark blue checkerboard */
	background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAABCSURBVFhH7c4hEQAgEABB2lGCBMRAUIl4T4E3zAvMijOntvWxotLcpxQAAAAAAADAf0A2X8pQLwEAAAAAAAB8Bqy4mHeUiBSSWmgAAAAASUVORK5CYIIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==);
	box-sizing: border-box;
	color: white;
}
div.panner {
	cursor: move;
}
.panner > img, .panner > span, .panner > div {
	transform-origin: left top 0px;
	position: absolute;
	pointer-events: none;
}
.panner.zoomed img, .resinfo.sprite .frame.zoomed {
	-ms-interpolation-mode: nearest-neighbor;
	image-rendering: optimizeSpeed;
	image-rendering: -moz-crisp-edges;
	image-rendering: -webkit-optimize-contrast;
	image-rendering: -o-crisp-edges;
	image-rendering: pixelated;
}
.panner::after {
	content: attr(data-zoom);
	color: white;
	display: inline-block;
	padding: 1px 2px;
	background: rgba(0, 0, 0, 0.4);
	position: absolute;
	top: 0;
	left: 0;
}
.panner .glyph-guide {
	color: white;
	background: rgba(255, 0, 0, 0.5);
	text-shadow: 0.1px 0.2px 1px rgba(0, 0, 0, 0.7);
	font-family: monospace;
	box-sizing: border-box;
	text-align: center;
	padding: 0px 1px;
}

#download {
	text-indent: -9999px;
}

.hello-window {
	width: 640px;
	background: #fff;
	box-sizing: border-box;
	padding: 10px 5px;
	box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4);
}
#hello {
	position: absolute;
	left: calc(50% - 320px);
	top: 60px;
	height: calc(100% - 80px);
	height: calc(100vh - 80px);
	max-height: 560px;
	z-index: 1000;
	display: flex;
	flex-direction: column;
}
.hello-window > * {
	padding: 0 5px;
}
#hello section {
	flex-grow: 1;
	overflow-y: auto;
}
#hello footer {
	padding-top: 5px;
	text-align: center;
}
#hello p + ul {
	margin-top: -0.5em;
}
.hello-window header {
	margin-bottom: 0.3em;
}